<template>
  <div>
      <header>
          <div class="h_box">
              <input type="text" placeholder="搜索鲜花.蛋糕.礼品">
              <span class="glyphicon glyphicon-search"></span>
          </div>
      </header>
    <div class="all">
      <div class="nav">
         <ul>
             <li @click="flag=1" :class="flag==1?'active':''"> 
                热门推荐
             </li>
             <li @click="flag=2" :class="flag==2?'active':''">
                鲜花
             </li>
             <li @click="flag=3" :class="flag==3?'active':''">
                永生花
             </li>
             <li @click="flag=4" :class="flag==4?'active':''">
                蛋糕
             </li>
             <li @click="flag=5" :class="flag==5?'active':''">
                巧克力
             </li>
             <li @click="flag=6" :class="flag==6?'active':''">
                特色礼品
             </li>
              <li @click="flag=7" :class="flag==7?'active':''">
                品牌公仔
             </li>
              <li @click="flag=8" :class="flag==8?'active':''">
                礼篮
             </li>
              <li @click="flag=9" :class="flag==9?'active':''">
                绿植花卉
             </li>
         </ul>
      </div>
      <div class="right">
          <div class="imgbox">
           <img src="../../images/liushuxue/18_newyear_all.jpg" alt="">
           <p class="spring">
               春节不打烊,宠爱不停歇
           </p>
         </div>
         <div class="imgnav">
             <p class="title">大家都在找</p>
             <ul>
                 <li v-for="item in sorts" :key="item.id">
                     <a href="/#/categorylist">
                         <img :src="item.src" alt="">
                         <p>{{item.description}}</p>
                     </a>
                 </li>
                  <!-- <li>
                     <a href="javascript:;">
                         <img src="../../images/liushuxue/rose.png" alt="">
                         <p>鲜花</p>
                     </a>
                 </li>
                  <li>
                     <a href="javascript:;">
                         <img src="../../images/liushuxue/rose.png" alt="">
                         <p>鲜花</p>
                     </a>
                 </li>
                  <li>
                     <a href="javascript:;">
                         <img src="../../images/liushuxue/rose.png" alt="">
                         <p>鲜花</p>
                     </a>
                 </li>
                  <li>
                     <a href="javascript:;">
                         <img src="../../images/liushuxue/rose.png" alt="">
                         <p>鲜花</p>
                     </a>
                 </li>
                  <li>
                     <a href="javascript:;">
                         <img src="../../images/liushuxue/rose.png" alt="">
                         <p>鲜花</p>
                     </a>
                 </li>
                   <li>
                     <a href="javascript:;">
                         <img src="../../images/liushuxue/rose.png" alt="">
                         <p>鲜花</p>
                     </a>
                 </li>
                  <li>
                     <a href="javascript:;">
                         <img src="../../images/liushuxue/rose.png" alt="">
                         <p>鲜花</p>
                     </a>
                 </li>
                  <li>
                     <a href="javascript:;">
                         <img src="../../images/liushuxue/rose.png" alt="">
                         <p>鲜花</p>
                     </a>
                 </li> -->
             </ul>
         </div>
      </div>
    </div>
    <footers></footers>
  </div>
</template>

<script>
import footers from './footer.vue';
import sorts from './data/sort.json';
 export default {
  data() {
    return {
      sorts: [],
      flag: 1,
    };
  },
   created() {
      this.getSorts();
    },
  methods: {
    getSorts() {
      this.sorts = sorts
    }
  },
  components: {
      footers: footers
  }
}; 
</script>
<style lang="css" scoped>
header {
  height: 44px;
  background-color: #f6f6f6;
}
.h_box {
  padding: 6px 15px;
  position: relative;
}
.h_box input {
  width: 100%;
  height: 30px;
  font-size: 12px;
  border: 0;
}
.h_box span {
 position: absolute;
 top: 15px;
 right: 20px;
 color: #515151;
 font-size: 12px;
}
.all {
    overflow: hidden;
    margin-bottom: 47px;
}
.nav {
  width: 147px;
  float: left;
}
.nav ul li {
  background-color: #f6f6f6;
  line-height: 50px;
  text-align: center;
  font-size: 12px;
}
.nav ul li.active {
  color: #FF6600;
  background-color: #fff;
}
.right {
    margin-left: 154px; 
}
.imgbox {
   position: relative;
}
.imgbox img {
    width: 100%;
    height: 100%;;
}
.spring {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   color: #fff;
}
.title {
  margin-top: 20px;
  margin-bottom: 25px;
  color: #333;
  font-size: 12px;
}
.imgnav ul {
  overflow: hidden;
}
.imgnav ul li {
  float: left;
  width: 33.3%;
  text-align: center;
}
.imgnav ul li img {
  width: 56px;
}
.imgnav ul li p {
 font-size: 12px;
 margin-top: 5px;
}
</style>

